<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./css/common.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        li {
            height: 50px;
            margin-top: 1px;
        }

        input {
            height: 35px;
            flex-grow: 1;
            border: 1px solid #ebebeb;
            margin-left: 15px;
            text-indent: 10px;
        }

        button {
            margin-top: 50px;
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>
    <header>
        <a href="./list.html">列表</a>
        <a href="./add.html">添加</a>
    </header>

    <div id="box" class="mt-5">
        <!-- <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>头像地址:</span> <input type="text" placeholder="选填">
        </li> -->
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>工程师英文名:</span> <input type="text" placeholder="必填" value="zhangsan">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>工程师昵称:</span> <input type="text" placeholder="选填" value="阿三">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>工程师性别:</span> <input type="text" placeholder="选填" value="男">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>工程师年龄:</span> <input type="text" placeholder="选填" value="20">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>工程师籍贯:</span> <input type="text" placeholder="选填" value="广东深圳">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>工程师爱好: </span><input type="text" placeholder="选填" value="篮球,羽毛球">
        </li>
    </div>

    <p class="fcc"> <button class="btn">提交</button></p>

    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
    <script>
        $('.btn').click(function () {
            var $list = $('input');
            var data = {
                username: $list[0].value,
                nickname: $list[1].value,
                sex: $list[2].value,
                age: $list[3].value,
                address: $list[4].value,
                hobby: $list[5].value
            }
            var baseUrl = "http://localhost:8888";
            axios.post(baseUrl + '/add', data).then(function (res) {
                console.log(res);
            })
        })
    </script>
</body>

</html>